<template>
    <div class="order">
        <div class="mymould_22" style="margin-bottom: 20px">
        <div class="pl10 pr10">
          <div class="myorder">
            <div class="clearfix title pt10 pl10 pr10">
              <div class="f1">
                <a>
                  <img src="./assets/img/myorder.png" />
                </a>
              </div>
              <div class="fr">
                <router-link tag="a" to="/userorder1" active-class="active" href="javascript:void(0);">
                  <img src="./assets/img/all.png">
                </router-link>
              </div>
            </div>
          
            <div class="clearfix mt20 pb10">
              <div class="f1" style="width:20%;">
               <router-link tag="a" to="/userorder2" active-class="active" href="javascript:void(0);" class="db ftc orederli">
                  <div class="liimg rela">
                    <img  src="./assets/img/1.png">
                  </div>
                  <div class="ft12 ftc ell mt5">待付款</div>
               </router-link>
              
              </div>
              
              <div class="f1" style="width:20%;">
               <router-link tag="a" to="/userorder3" active-class="active" href="javascript:void(0);" class="db ftc orederli">
                  <div class="liimg rela">
                    <img  src="./assets/img/2.png">
                  </div>
                  <div class="ft12 ftc ell mt5">待收货</div>
               </router-link>
                 
             
              </div>
              
              <div class="f1" @click="alertHandler()" style="width:20%;">
               <a class="db ftc orederli">
                  <div class="liimg rela">
                    <img  src="./assets/img/3.png">
                  </div>
                  <div class="ft12 ftc ell mt5">评价有礼</div>
               </a>
                
              </div>
              
              <div class="f1" style="width:20%;">
               <router-link tag="a" to="/service" active-class="active" href="javascript:void(0);" class="db ftc orederli">
                  <div class="liimg rela">
                    <img  src="./assets/img/4.png">
                  </div>
                  <div class="ft12 ftc ell mt5">客服中心</div>
               </router-link>
                
              </div>
             
              <div class="div_line f1" @click="alertHandler()" style="width:20%;">
               <a class="db ftc orederli" >
                  <div class="liimg rela">
                    <img  src="./assets/img/5.png">
                  </div>
                  <div class="ft12 ftc ell mt5">国际订单</div>
                  
               </a>
              </div>
              
              </div>
            </div>
          </div>
        </div>
      </div>
          
</template>
<script>
import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);
export default {
  data() {
    return {
      imgList: [],
    };
  },
  async mounted() {
    let result = await this.$http.get({
      url: "/user/UserCenter.html",
      params: {
        version: "420",
        system: "wap",
        isWeb: 1,
        distinct_id:
          "96513866273889",
        debug_param: "",
      },
    });
    this.imgList = result.list[1].data.items;
  },
  methods:{
    alertHandler(){
      Dialog.alert({
    message: '对不起，网页版暂不支持该功能<br>请下载App体验更多精彩',
    theme: 'round-button',
    confirmButtonColor:'#41c856',
    confirmButtonText:'下载App',
    // lockScroll:'false',
    closeOnClickOverlay:'true'
    }).then(() => {
    code=200
  
});
    }
  }
};
</script>
<style lang="stylus" scoped>
.pl10 {
  padding-left: 0.1rem;
}

.pr10 {
  padding-right: 0.1rem;
}

.pt10 {
  padding-top: 0.1rem;
}

.f1 {
  float: left;
}

.mt20 {
  margin-top: 0.2rem;
}

.ell {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow hidden
}

.mt20 {
  margin-top: 0.2rem;
}

.ftc {
  text-align: center;
}

.block, .db {
  display: block;
}

.rela {
  position: relative;
}

.ft12 {
  font-size: 0.12rem;
}

.mt5 {
  margin-top: 0.05rem;
}

.myorder {
  -webkit-box-shadow: 0.01rem 0.02rem 0.25rem 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0.01rem 0.02rem 0.25rem 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.15rem;
}

.myorder .title img {
  height: 0.16rem;
}

.myorder .liimg img {
  width: 45%;
}

.myorder .orederli {
  padding: 0 0.08rem;
}

.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.fr {
  float: right;
}

.pb10 {
  padding-bottom: 0.1rem;
}

.div_line {
  border-left: 1px solid #e7e7e7;
}
</style>